<template>
<!-- <div class="dv-container"> -->
  <dv-full-screen-container>
    <div id="index" class="bg">
    <!-- 加载等待 -->
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="host-body">
      <!-- 网页头部展示信息 -->
      <div class="header">
        <screen-header></screen-header>
      </div>
      <div class="content">
        <el-row style="height: 100%;">
          <el-col style="height: 100%;">
            <el-row style="height:70%;">
              <!-- 上半区域 -->
              <el-col style="height:100%;display:flex;flex-direction:row;" >
                <!-- 上左区域 -->
                <div class="left" style="height:100%;flex:2;flex-direction:column;aligin-items:stretch;"> 
                  <!-- 每日总计  封装 -->
                  <center-left-top style="height:60%"></center-left-top>
                   <!-- 上左下 -->
                  <dv-border-box-1 style="height:40%">
                    <center-left-bottom></center-left-bottom>
                  </dv-border-box-1>
                </div>

                <!-- 地图 -->
                <div class="left" style="height:100%; flex:3;flex-direction:column;aligin-items:stretch;">
                  <div style="height:100%">
                    <center-china-map></center-china-map>
                 </div> 
                </div>

                <!-- 上半部分右上   排名轮播表 -->
                <div class="left" style="height:100%; flex:2;flex-direction:column;aligin-items:stretch;">
                  <dv-border-box-13 style="height:100%;width:100%">
                    <!-- 右上 -->
                    <center-right-top></center-right-top>
                  </dv-border-box-13>
                  <!-- <dv-border-box-8 style="height:45%" :reverse="true">
                    右下
                    <center-right-bottom></center-right-bottom>
                  </dv-border-box-8> -->
                </div>
              </el-col>
            </el-row>

            <el-row style="height:30%;">
              <!-- 下半部分 -->
              <el-col style="height:100%; display:flex; flex-direction:row;">
                <el-col style="height:100%; display:flex; flex-direction:row;justify-content:flex-start" >
                  <!-- 左下部分  中国疫情当天趋势 -->
                  <dv-border-box-1 style="width:50%;height:100%">
                    <bottom-left style="width:96%;height:96%;margin-top:2%;margin-left:2%"></bottom-left>
                  </dv-border-box-1>
                  <!-- 左下部分  中国疫情总计趋势 -->
                  <dv-border-box-4 style="width:50%;height:100%;" :color="['#6a3ff5','#4529a2']">
                    <bottom-right style="width:96%;height:96%;margin-top:2%;margin-left:2%"></bottom-right>
                  </dv-border-box-4>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
// Header
import ScreenHeader from './screenHeader.vue'
// 上半部分
import centerLeftTop from './centerLeftTop'
import centerLeftBottom from './centerLeftBottom'
import centerRightTop from './centerRightTop'
import centerRightBottom from './centerRightBottom'
import centerChinaMap from "./centerMap"
// 下半部分
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'

export default {
  components :{
    ScreenHeader,
    centerLeftTop,
    centerLeftBottom,
    centerRightTop,
    centerRightBottom,
    centerChinaMap,
    bottomLeft,
    bottomRight
  },
  data () {
    return {
      loading: true  
    };
  },
  mounted() {
    this.cancelLoding();
  },
  methods: {
    cancelLoding() {
      setTimeout(() => {
        this.loading = false;
      },500);
    }
  }

}
</script>

<style lang="scss" scoped>

.bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 0.2rem 0 0.2rem;
  // background-color: rgb(248, 248, 252);
  background-image: url("../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
  color: white;
}
.host-body {
  flex: 1;
  flex-direction: column;
  justify-content: space-around;

  .header {
    width: 100%;
    height: 50px;
    flex: 2;
  }

  .content {
    flex: 2;
    width: 100%;
    height: calc(100% - 50px);
  }
}

// 使用@keyframes规则，你可以创建动画。
// 创建动画是通过逐步改变从一个CSS样式设定到另一个。
// 在动画过程中，您可以更改CSS样式的设定多次。
// 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
.map{ 
  position:relative; 
  height: 80%; 
  width: 80%;
  z-index: 9;
}
.map4{ 
  width: 100%; 
  height:100%; 
  position: relative; 
  top: 10%;
  left: 4%;
  margin-top: .2rem; 
  z-index: 5;
}
.map1,.map2,.map3{ 
  position:absolute; 
  opacity: .5
  }
// 外面大的
.map1{ 
  height:100%;
  width:100%; 
  margin-left: 10%;
  margin-top: 11%;
  animation: myfirst2 15s infinite linear;
  }
.map2{ 
  height:80%;
  width:80%;  
  z-index: 3; 
  opacity: 0.2; 
  margin-left: 20%;
  margin-top: 20%;
  animation: myfirst 10s infinite linear;
  }
.map3{ 
  height:80%;
  width:80%; 
  z-index: 1;
  margin-left: 20%;
  margin-top: 20%;
}

.map_img {
  height: 100%;
  margin-left: 7%;
}

</style>
